<template>
	<view class="cart">
		
		<view class="content" v-if="cart.length === 0 || token.length === 0">
			<view class="none_shop">
				<u-empty
				        mode="car"
				        icon="https://abc.apricity.asia/public/icon/car.png"
				>
				</u-empty>
			</view>
		</view>
		<view class="content" v-else>
			<view class="cart">
				<view class="cart_top">
					<view class="cart_top_left">
						 <radio @click="allChange" :checked="allflag" style="transform:scale(0.7)" ></radio>
					</view>
					<view class="cart_top_cen">
						您选择了{{sumNumber}}件商品
					</view>
					<view class="cart_top_right" @click="closeCart">
						<uni-icons style="color: #abadaa;" type="trash" size="18"></uni-icons>
						<text>清空购物车</text>
					</view>
				</view>
				
			</view>
				<view class="cart_content">
				
					<scroll-view style="height: calc(80vh) ;" class="scroll-view_H" scroll-y="true"  scroll-left="120">	
					<view class="cart_content_item" @longpress="delShop(item)" v-for="(item,index) in cart" :key="index">
					
						<view class="cart_content_item_left">
							<radio style="transform:scale(0.7)" :checked="item.is_sel" @click="delS(item)" ></radio>
						</view>
						<view class="cart_content_item_center">
							<view class="cart_content_item_center_left">
								<image class="cart_content_item_center_left_img" :src="item.img[0]" mode="aspectFit"></image>
							</view>
							<view class="cart_content_item_center_right">
								<view class="cart_content_item_center_right_head">
									{{item.introduce}}
								</view>
								<view class="cart_content_item_center_right_center">
									{{item.classify}}
								</view>
								<view class="cart_content_item_center_right_bottom">
									￥{{(item.price * item.number).toFixed(2)}}
								</view>
							</view>
						</view>
						<view class="cart_content_item_right">
							<uni-number-box  :background="'rgb(41, 121, 255)'" :color="'#FFFFFF'" @change="chnageSum($event,item)"  :value="item.number" :min="1"></uni-number-box>
						</view>
				
					</view>
						</scroll-view> 
				</view>
		</view>
		<view class="box_cart"  v-if="cart.length !== 0 && token.length !== 0">
			<view class="box_cart_canter">
				预计到手<text class="price">￥{{parseInt(sumPrice).toFixed(2)}}</text>
			</view>
			<view class="box_cart_right"  @click="goToPay">
				去结算
			</view>
		</view>
		
	</view>
</template>

<script>
	import { mapGetters,mapState,mapMutations } from 'vuex'

	export default {
		data() {
			return {
				allflag: true,    // 全选
			};
		},
		computed: {
			...mapGetters(['sumNumber','sumPrice']),
			...mapState(['cart','token']),
		},
		onShow() {
			if (this.token.length !== 0) {
				this.sumNumber === 0 ? '' : uni.setTabBarBadge({
				  index: 3,
				  text: this.sumNumber+''
				})
			} else {
				uni.removeTabBarBadge({
					index: 3
				})
			}
		},
		methods: {
			...mapMutations(['userAllCartOk','userAllCartOver','closeAllCart','changeOneShop','delOneShop','changeShopNumebr']),
			/*
				支付
			*/
		   goToPay () {
			   uni.navigateTo({
			   	url: '/pay/shopPay/shopPay'
			   })
		   },
			/*
				改变商品数量
			*/
		   chnageSum(e,item) {
			   item.number = e
			   this.changeShopNumebr(item)
		   },
			/*
				c长按删除单个商品
			*/
			delShop (item) {
				let _this = this
				uni.showModal({
					title: '删除单个商品',
					content: '您真的要删除这个商品吗?',
					success(e) {
						if (e.confirm) {
							_this.delOneShop(item)
							uni.removeTabBarBadge({
								index: 3
							})
						}
					}
				})
			},
			/*
				放弃选择单个商品
			*/
		   delS (item) {
			   this.changeOneShop(item)
		   },
			/*
				清空购物车
			*/
		   closeCart () {
			   let _this = this
			   uni.showModal({
			   	title: '清空购物车?',
				content: '您真的要清空购物车吗?',
				success(e) {
					if (e.confirm) {
						_this.closeAllCart()
					}
				}
			   })
		   },
			/*
				全选
			*/
		   allChange () {
			   if (this.allflag) {  // 全不选
				   this.userAllCartOver()
			   } else {
				   this.userAllCartOk()
			   }
			   this.allflag = !this.allflag
		   },
			/*
				返回
			*/
		   returnNavaBack () {
			   uni.navigateBack()
		   }
		}
	}
</script>

<style lang="scss">
	.price {
		color: #f1a532;
		font-size: 22px;
	}
	.box_cart {
		position: relative;
		box-shadow: 8px 4px 8px 8px rgba(0,0,0,0.1);
		z-index: 999;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #FFFFFF;
		width: 90%;
		position: fixed;
		bottom: 20rpx;
		left: 5%;
		border-radius: 50rpx;
		padding-left: 15rpx;
		.box_cart_canter {
			padding-left: 5%;
		}
		.box_cart_right {
			border-top-right-radius: 50rpx;
			border-bottom-right-radius: 50rpx;
			line-height: 100rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: 16px;
			background-color: #309cff;
			height: 100%;
			width: 30%;
		}
	}
	.cart {
		width: 100%;
		background-color: #FFFFFF;
		.cart_top {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #f2f2f2;
			.cart_top_left {
				font-size: 14px;
			}
			.cart_top_cen {
				font-size: 14px;
				color: #3C9CFF;
			}
			.cart_top_right {
				font-size: 10px;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #abadaa;
			}
		}
	}
	.cart_content {
		background-color: #FFFFFF;
		width: 100%;
		padding-bottom: 20%;
		.cart_content_item {
			margin-top: 10px;
			width: 100%;
			height: 180rpx;
			padding: 20rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.cart_content_item_left {
				width: 10%;
				margin-right: 15px;
			}
			.cart_content_item_center {
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				.cart_content_item_center_left {
					background-color: #c0c4cc;
					width: 80px;
					height: 80px;
					border-radius: 50%;
					margin-right: 5px;
					.cart_content_item_center_left_img {
						border-radius: 50%;
						width: 80px;
						height: 80px;
					}
				}
				.cart_content_item_center_right {
					
					.cart_content_item_center_right_head {
				
						overflow: hidden;
						
						text-overflow: ellipsis;
						
						display: -webkit-box;
						
						-webkit-line-clamp: 2;
						
						/*! autoprefixer: off */
						
						-webkit-box-orient: vertical;
						
						overflow-wrap: break-word;
						word-break: break-word;
						word-wrap: break-word;
						font-size: 18px;
						margin-bottom: 5rpx;
					}
					.cart_content_item_center_right_center {
						color: #a1a1a1;
						font-size: 12px;
					}
					.cart_content_item_center_right_bottom {
						color: #e95f43;
						font-size: 18px;
					}
				}
				
			}
			.cart_content_item_right {
				margin-left: 30px;
				display: flex;
				align-items: center;justify-content: center;
				width: 40%;
			}
		}
		
		
	}
	.uni-navbar__content_view {
		justify-content: center !important; 
	}
	.cart {
		.h {
			text-align: center !important;
			display: flex;
			align-items: center !important;
			justify-content: center !important;
			.title {
				font-size: 18px;
				color: #000000;
				
			}
			.icon_ {
				margin-left: 5px;
			}
		}
		.content {
			background-color: #FFFFFF;
			border-bottom-left-radius: 10px;
			border-bottom-right-radius: 10px;
			box-shadow: 1px 1px 1px #FFFFFF;
			padding: 10px;
			.btn_gw {
				color: #000000 !important;
				margin-top: 5px;
			}
		}
		
	}
</style>
